<template>
    <div>
        <section class="wrap">
            <aside class="v-aside"></aside>
            <div class="main">
                <header>
                    <ul>
                        <Nav :title="'注册新账号'"></Nav>
                    </ul>
                    <div class="clearfixed"></div>
                </header>
                <div class="content">
                    <div class="detail">
                        <div class="login">
                            <p><label><span>通过 GitHub 账号</span><button class="btn btn-default">注册新账号</button></label></p>   
                            <p><label><span>或者</span></label></p>   
                            <p><label><span>用户名</span><input name="username" type="text"></label></p>   
                            <p><label><span>密 码</span><input name="password" type="password"></label></p>
                            <p><label><span></span><button class="btn btn-login">关联旧账号</button></label></p>
                        </div>
                    </div>
                </div>    
            </div>    
            <div class="clearfixed"></div>
        </section>
    </div>
</template>

<script>
import Nav from "../components/nav";
export default {
  components: {
    Nav
  }
};
</script>

<style scoped>
.wrap .main .content .detail{padding:15px;}
.wrap .main .content .detail a{color:#08c;text-decoration: underline;}
.wrap .main .content .detail p{padding: 10px 15px;}
.wrap .main .content .detail ul{padding:10px 20px;}
.wrap .main .content .detail li{line-height:2rem;}

.login input{border-radius:3px;outline:none;background:none;border:1px solid #ccc;width:284px;height:30px;padding:10px;box-sizing: border-box;transition: all .5s;}
.login input:focus{box-shadow: 0 0 1px 1px rgba(82,168,236,.8);border:1px solid rgba(82,168,236,.8)}
.login label span{width:160px;text-align:right;display:inline-block;padding:0 10px;color:#333;}

.wrap .main .content .detail .login-btn button{margin:0 5px;}
.wrap .main .content .detail .login-btn a{margin-left:10px;color: #778087;text-decoration:none}
.wrap .main .content .detail .login-btn a:hover{text-decoration:underline}
.about-friend-links a img{width:250px;height:60px;}
@media (max-width:768px){
    .login label span{width:62px;}
    .wrap .main .content .detail{padding:0}
    .login input{display: inline-block;width:70%;}
    .wrap .main .content .detail .login-btn{padding-left:40px;}
}
</style>
